<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <script src="/layui/layui.js"></script>
    <script src="/js/jquery/jquery-3.5.1.js"></script>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <title>from表单提交</title>
</head>
<body>
    <form class="layui-form" STYLE="padding-left: 25%;padding-top: 20%">
        <div class="layui-form-item">
            <label class="layui-form-label">账号</label>
            <div class="layui-input-inline">
                <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入账号" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-inline" >
                <input type="text" name = "user_name" lay-verify="user_name" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" style="padding-top: 20px;">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn" lay-submit="" lay-filter="login" style="width: 190px">登录</button>
            </div>
        </div>
    </form>
<script>
    layui.use('form', function(){
        var form = layui.form;
        //监听提交
        form.on('submit(login)', function(data){
            var rs = JSON.stringify(data.field)
            alert(rs)
            $.ajax({
                type:"put",
                url: "/user/userLogin",
                data:JSON.stringify(data.field),
                dataType:"json",
                contentType : "application/json; charset=utf-8",
                success: function(result){
                }
            });
        });
    });

    //表单取值
    layui.$('#register').on('click', function(){
        layui.use('layer', function(){
            var layer = layui.layer;
            layer.open({
                type: 2,
                title: '注册',
                shadeClose: false,
                shade: 0.8,
                area: ['500px', '400px'],
                content:'register'
            });
        });
    });

</script>

</body>
</html>